<template>
  <view class="booking">
    <view class="header">
      <view class="date">
        <view class="date-let">
          <scroll-view scroll-x class="menu">
            <view
              :class="['item', item.time === date ? 'active' : '']"
              v-for="item of dataList"
              :key="item.time"
              @click="
                handle('changeDate', {
                  date: item.time,
                  type: 1
                })
              "
            >
              <view class="s1">
                {{ item.day }}
              </view>
              <view class="s2">{{ item.week }}</view>
            </view>
          </scroll-view>
        </view>
        <!-- <view class="date-rig">
          <view
            class="calendar"
            @click="
              handle('changeDate', {
                type: 0
              })
            "
          >
            <i class="iconfont icon-calendar"></i>
            <view class="test">日历</view>
          </view>
        </view> -->
      </view>

      <scroll-view class="cat" scroll-x>
        <view
          :class="['cat-item', cat_id === item.id ? 'active' : '']"
          v-for="item of catList"
          :key="item.id"
          @click="handle('changeCat', item.id)"
          >{{ item.name }}</view
        >
      </scroll-view>
    </view>

    <view class="goodslist" v-if="list.length">
      <view
        class="item"
        v-for="item of list"
        :key="item.id"
        @click="$utils.toUrl(`/goods/goods/goods?id=${item.id}`)"
      >
        <view class="img">
          <image :src="item.cover_pic" mode="aspectFill"></image>
        </view>

        <view class="con">
          <view class="name">{{ item.name }}</view>
          <view class="time">{{ times(item) }}</view>

          <view class="fd">
            <view class="price">{{ item.price }}</view>
            <view
              class="btn"
              @click="
                $utils.toUrl(
                  `/goods/goods/goods?id=${item.id}&date=${this.date}`
                )
              "
              >预约</view
            >
          </view>
        </view>
      </view>
    </view>

    <u-calendar
      tooltip="预约日历"
      v-model="show"
      mode="date"
      @change="(e) => handle('change', e)"
      active-bg-color="#F0250E"
      btn-type="error"
      :min-date="mindate"
      max-date="3000-01-01"
    ></u-calendar>
  </view>
</template>

<script>
import { catListSelect } from "@/api/marketing/booking";

export default {
  components: {},

  data() {
    return {
      show: false,
      index: 0,
      date: "",
      dataList: [],
      catList: [],
      cat_id: "",
      limit: 10,
      page: 1,
      list: [],
      noMore: false,
      mindate: ""
    };
  },

  computed: {
    times() {
      return (item) => {
        if (!item.attr) return [];
        const data = JSON.parse(item.attr);
        let str = "";

        data.splice(2, data.length - 1);
        data.forEach((el) => {
          if (el.attr_list.length > 3) {
            el.attr_list.splice(2, el.attr_list.length - 1);
          }

          str += el.attr_list.map((el) => el.attr_name).join(" | ");
        });

        return (str += " | 多时段");
      };
    }
  },

  async onLoad() {
    this.dataList = this.orderDayDeal();
    this.date = this.dataList[0].time;
    const res = await catListSelect();
    if (!res.code) this.catList = res.data;

    this.catList.unshift({
      id: "",
      name: "全部"
    });

    this.mindate = this.$utils.formatDate(new Date(), "yyyy-MM-dd");
    this.clear();
  },

  methods: {
    orderDayDeal() {
      let arr = [];
      let date = new Date();
      let weekTrans = new Array("日", "一", "二", "三", "四", "五", "六");
      let dayTrans = ["今天", "明天"];
      for (let i = 0; i < 7; i++) {
        let obj = {};
        let timeStamp = 1000 * 60 * 60 * 24 * i + date.getTime();

        obj["day"] = this.getNowFormatDate(timeStamp, "toDay");

        obj["time"] = this.timestampToTime(timeStamp);
        let time = this.timestampToTime(timeStamp);
        let nextDay = new Date(time);
        if (i <= 1) {
          obj["week"] = dayTrans[i];
        } else {
          obj["week"] = "周" + weekTrans[nextDay.getDay()];
        }

        arr.push(obj);
      }
      return arr;
    },

    getNowFormatDate(timeStamp, type = "full") {
      let date = new Date(timeStamp);
      let seperator1 = ".";
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate =
        date.getFullYear() + seperator1 + month + seperator1 + strDate;
      if (type == "toDay") {
        currentdate = month + seperator1 + strDate;
      }
      return currentdate;
    },

    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D;
    },

    clear() {
      this.isEnd = false;
      this.page = 1;
      this.list = [];

      this.getGoodsList();
    },

    handle(type, item) {
      switch (type) {
        case "changeDate":
          if (!item.type) return (this.show = true);
          this.date = item.date;
          break;

        case "changeCat":
          this.cat_id = item;
          this.clear();
          break;

        case "change":
          this.date = item.result;
          this.show = false;
          break;
      }
    },

    async getGoodsList() {
      let { limit, page, cat_id } = this;

      let res = await this.$allrequest.diy.getGoodsList(
        {
          limit,
          page,
          product_type: 2,
          cat_id
        },
        true
      );
      uni.stopPullDownRefresh();

      if (!res.code) {
        this.page += 1;

        let { list, page_count: totalCount } = res.data;
        if (this.list.length >= totalCount) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }

        this.list.push(...list);
      }
    }
  },

  onReachBottom() {
    if (this.noMore) {
      return;
    }

    this.getGoodsList();
  },

  onPullDownRefresh() {
    this.clear();
  }
};
</script>

<style lang="less" scoped>
.booking {
  position: relative;
  min-height: 100vh;
  background: #f2f2f2;
}

.header {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 9;
  padding: 24rpx;
  width: 100%;
  background: #fff;
}

.date {
  display: flex;
  padding-bottom: 24rpx;
}

.date-let {
  flex: 1;
  overflow: hidden;
  // margin-right: 80rpx;
}

.cat {
  overflow-x: auto;
  white-space: nowrap;

  .cat-item {
    display: inline-block;
    margin-right: 24rpx;
    vertical-align: middle;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 24rpx;
    border: 2rpx solid #f2f2f2;
    font-size: 24rpx;
    color: #8c8c8c;
    background: #f2f2f2;
    border-radius: 10rpx;

    &.active {
      color: #f0250e;
      font-weight: bold;
      border-color: #f0250e;
      background: #fcedeb;
    }
  }
}

.menu {
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 24rpx;

  .item {
    display: inline-block;
    vertical-align: middle;
    margin-right: 16rpx;
    width: 92rpx;
    height: 90rpx;
    text-align: center;
    border-radius: 16rpx;
    box-sizing: border-box;
    color: #262626;

    &.active {
      background: #f0250e;
      color: #fff;
    }

    .s1 {
      padding-top: 6rpx;
      font-size: 24rpx;
    }

    .s2 {
      font-size: 28rpx;
    }
  }
}

.date-rig {
  position: absolute;
  right: 0;
  top: 30rpx;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  padding-top: 20rpx;
  align-items: center;
  width: 86rpx;
  height: 132rpx;
  background: #fff;
  box-shadow: -1px 0px 10px 1px rgba(0, 0, 0, 0.05);
}

.goodslist {
  margin: 24rpx;
  padding: 24rpx 24rpx 0;
  border-radius: 20rpx;
  background: #fff;

  .item {
    display: flex;
    margin-bottom: 24rpx;
  }

  .img {
    margin-right: 20rpx;
    width: 160rpx;
    height: 160rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
  }

  .name {
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .time {
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .fd {
    display: flex;
    justify-content: space-between;
  }

  .price {
    display: flex;
    align-items: flex-end;
    color: #f0250e;
    font-size: 36rpx;
    font-weight: bold;

    &:before {
      content: "￥";
      font-size: 24rpx;
    }
  }

  .btn {
    padding: 10rpx 22rpx;
    background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
    border-radius: 32px;
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
  }
}

.calendar {
  text-align: center;

  .iconfont {
    font-size: 40rpx;
  }

  .test {
    font-size: 22rpx;
    font-weight: bold;
  }
}
</style>
